<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="css/style1.css" rel="stylesheet" type="text/css"/>
    <script src="../js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="js/tab.js"></script>
    <script type="text/javascript" src="js/layer.js"></script>
    <script type="text/javascript" src="js/touchSlider.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed">
        <a href="javascript:window.history.go(-1);" class="aui-navBar-item">
            <i class="icon icon-return"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title"></span>
        </div>
        <a href="javascript:;" class="aui-navBar-item">
            <i class="icon icon-xin"></i>
            <i class="icon icon-shr"></i>
        </a>
    </header>
    <div id="scrollBg" style="display: none;">
        <div class="aui-link-me">
            <a href="#commodity">商品</a>
            <a href="#">评价</a>
            <a href="#">详情</a>
        </div>
    </div>
    <section class="aui-scrollView">
        <div class="img_gallery" id="commodity">
            <div class="main_img">
                <ul>
                    <li>
                        <img src="images/pd-001.jpg" alt="">
                    </li>
                    <li>
                        <img src="images/pd-002.jpg" alt="">
                    </li>
                    <li>
                        <img src="images/pd-003.jpg" alt="">
                    </li>
                    <li>
                        <img src="images/pd-004.jpg" alt="">
                    </li>
                    <li>
                        <img src="images/pd-005.jpg" alt="">
                    </li>
                </ul>
            </div>
            <div class="img_font">
                <span>1/5</span>
                <span>2/5</span>
                <span>3/5</span>
                <span>4/5</span>
                <span>5/5</span>
            </div>
        </div>
        <div class="aui-product-head aui-footer-flex">
            <h2>
                <i>￥</i>
                588


            </h2>
            <span>￥899</span>
        </div>
        <div class="aui-product-title">
            <h2>Wolfcode 叩丁狼 李宇春同款 经典烫金标男女运动休闲鞋经典烫金标男女运动休闲鞋</h2>
        </div>
        <div class="aui-product-title aui-product-title-text">
            <h2>叩丁狼 Wolfcode 李宇春同款OnitsukaTiger 经典烫金标男女运动休闲鞋经典烫金标男女运动休闲鞋</h2>
        </div>
        <div class="aui-tag-info clearfix">
            <img src="images/icon-rb.png" alt="">
            <span>中国品牌</span>
        </div>
        <div class="aui-ad-img">
            <img src="images/ad-001.png" alt="">
        </div>
        <div class="aui-module-box">
            <ul>
                <li class="aui-footer-flex" data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}">
                    <div class="aui-module-hd">选择</div>
                    <div class="aui-module-bd">尺码</div>
                    <div class="aui-module-fr aui-footer-flex1"></div>
                </li>
                <li class="aui-footer-flex" data-ydui-actionsheet="{target:'#actionSheet1',closeElement:'#cancel1'}">
                    <div class="aui-module-hd">促销</div>
                    <div class="aui-module-bd">
                        <span>[12期免息]</span>
                        免费开通易支付 全场最低6期免息


                    </div>
                    <div class="aui-module-fr aui-footer-flex1"></div>
                </li>
                <li class="aui-footer-flex" data-ydui-actionsheet="{target:'#actionSheet2',closeElement:'#cancel2'}"
                    style="display:inherit">
                    <div class="aui-footer-flex">
                        <div class="aui-module-hd">配送</div>
                        <div class="aui-module-bd">杭州 至 北京市海淀区西三环北路43号</div>
                        <div class="aui-module-fr aui-footer-flex1"></div>
                    </div>
                    <div class="aui-address-box aui-footer-flex">
                        <div class="aui-address-box-item aui-address-box-item-line-one">
                                    <span class="aui-address-box-item-img">
                                        <img src="images/icon-ad-001.png" alt="">
                                    </span>
                            <span>全球直采</span>
                        </div>
                        <div class="aui-address-box-item aui-address-box-item-line-one">
                                    <span class="aui-address-box-item-img">
                                        <img src="images/icon-ad-002.png" alt="">
                                    </span>
                            <span>叩丁狼旗舰店</span>
                        </div>
                        <div class="aui-address-box-item">
                                    <span class="aui-address-box-item-img">
                                        <img src="images/icon-ad-003.png" alt="">
                                    </span>
                            <span>上海市</span>
                        </div>
                    </div>
                </li>
                <li class="aui-footer-flex" data-ydui-actionsheet="{target:'#actionSheet3',closeElement:'#cancel3'}">
                    <div class="aui-module-hd">运费</div>
                    <div class="aui-module-bd">免运费</div>
                    <div class="aui-module-fr aui-footer-flex1"></div>
                </li>
                <li class="aui-footer-flex" data-ydui-actionsheet="{target:'#actionSheet4',closeElement:'#cancel4'}">
                    <div class="aui-module-hd">说明</div>
                    <div class="aui-module-bd">假一赔十 | 7天无忧退货 | 自营发货</div>
                    <div class="aui-module-fr aui-footer-flex1"></div>
                </li>
            </ul>
        </div>
        <div class="divHeight"></div>
        <div class="aui-evaluate-box">
            <div class="aui-footer-flex aui-evaluate-item">
                <div class="aui-footer-flex1 aui-evaluate-hd">商品评价(4599)</div>
                <div class="aui-evaluate-fr">96.0%</div>
            </div>
            <div class="aui-category-box-list ">
                <a href="javascript:;" class="aui-category-box-item">
                    是正品 <em>(988)</em>
                </a>
                <a href="javascript:;" class="aui-category-box-item">
                    很合脚 <em>(123)</em>
                </a>
                <a href="javascript:;" class="aui-category-box-item">
                    物流快 <em>(356)</em>
                </a>
            </div>
            <div class="aui-footer-flex aui-evaluate-item" style="padding-top:0.8rem">
                <div class="aui-footer-flex1 aui-evaluate-hd">问大家(199)</div>
                <div class="aui-evaluate-fr"></div>
            </div>
            <div class="aui-question">
                <a href="javascript:;" class="aui-footer-flex">
                    <div class="aui-footer-flex1">
                        <i class="icon icon-qa"></i>
                        是不是正品啊！


                    </div>
                    <div>5个回答</div>
                </a>
                <a href="javascript:;" class="aui-footer-flex">
                    <div class="aui-footer-flex1">
                        <i class="icon icon-qa"></i>
                        是自营的还是全球购


                    </div>
                    <div>5个回答</div>
                </a>
            </div>
        </div>
        <div class="divHeight"></div>
        <div class="aui-footer-flex aui-pp-box">
            <div class="aui-footer-flex1 aui-evaluate-hd">
                <div class="aui-footer-flex">
                    <div class="aui-pp-box-img">
                        <img src="images/logo-pp.png" alt="">
                    </div>
                    <div class="aui-pp-box-text">叩丁狼官方旗舰店</div>
                </div>
            </div>
        </div>
        <div class="aui-box-all">
            <a href="javascript:;">
                <div>471</div>
                <span>全部商品</span>
            </a>
            <a href="javascript:;">
                <div>4.86</div>
                <span>综合评分</span>
            </a>
        </div>
        <div class="aui-all-class">
            <a href="javascript:;">查看分类</a>
            <a href="javascript:;">进店看看</a>
        </div>
        <div class="divHeight"></div>
        <div class="aui-footer-flex aui-pp-box">
            <div class="aui-footer-flex1 aui-evaluate-hd">
                <div class="aui-footer-flex">
                    <div class="aui-pp-box-img">
                        <img src="images/logo-pp1.png" alt="">
                    </div>
                    <div class="aui-pp-box-text">
                        <h2>叩丁狼 Wolfcode </h2>
                        <p>
                            在售商品 <em>289</em>
                            件

                        </p>
                    </div>
                </div>
            </div>
            <div class="aui-evaluate-fr">进入品牌</div>
        </div>


        <div class="divHeight"></div>
        <div class="aui-introduce">
            <div class="aui-tab" data-ydui-tab>
                <div class="tab-panel">
                    <div class="tab-panel-item tab-active">
                        <div class="tab-item">
                            <div class="aui-page-img">
                                <div class="aui-page-pig">
                                    <img src="images/page-001.png" alt="">
                                </div>
                                <img src="images/page-002.png" alt="">
                                <img src="images/page-003.png" alt="">
                                <img src="images/page-004.png" alt="">
                                <img src="images/page-005.png" alt="">
                                <img src="images/page-006.png" alt="">
                                <img src="images/page-007.png" alt="">
                                <img src="images/page-008.png" alt="">
                                <img src="images/page-009.png" alt="">
                            </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="m-actionsheet" id="actionSheet">
            <div class="aui-show-box product">
                <div class="aui-show-box-title aui-footer-flex">
                    <div class="aui-footer-flex1">颜色、尺码</div>
                    <div>
                        <a href="javascript:;" id="cancel" class="">
                            <i class="icon icon-close"></i>
                        </a>
                    </div>
                </div>
                <div class="aui-show-box-cp aui-footer-flex">
                    <input type="hidden" name="id" render-value="id"/>
                    <div class="aui-show-box-img">
                        <img render-src="coverUrl" alt="安踏运动鞋">
                    </div>
                    <div class="aui-show-box-text">
                        <h1>商品名:<span render-html="productName"></span></h1>
                        <h2>
                            原价:¥<span style="text-decoration:line-through" render-html="salePrice"></span>
                            现价:¥<span render-key="salePrice" render-fun="getPrice"></span>
                        </h2>
                        <h3>
                            已选: <span class="selected"></span>
                        </h3>
                        <p>
                            仅剩<em><span render-html="storeNum"></span></em>件
                        </p>
                    </div>
                </div>
                <div class="aui-category-box">
                    <p>颜色</p>
                    <div class="aui-category-box-list">
                        <a href="javascript:;" class="aui-category-box-item">白色</a>
                        <a href="javascript:;" class="aui-category-box-item">红色</a>
                        <a href="javascript:;" class="aui-category-box-item">蓝色</a>
                    </div>
                </div>

                <div class="aui-category-box">
                    <p>尺码</p>
                    <div class="aui-category-box-list num">
                        <a href="javascript:;" class="aui-category-box-item">36</a>
                        <a href="javascript:;" class="aui-category-box-item ">37</a>
                        <a href="javascript:;" class="aui-category-box-item">37.5</a>
                        <a href="javascript:;" class="aui-category-box-item">38</a>
                        <a href="javascript:;" class="aui-category-box-item">39</a>
                        <a href="javascript:;" class="aui-category-box-item">40</a>
                        <a href="javascript:;" class="aui-category-box-item">42</a>
                        <a href="javascript:;" class="aui-category-box-item">43</a>
                        <a href="javascript:;" class="aui-category-box-item">44</a>
                        <a href="javascript:;" class="aui-category-box-item">44.5</a>
                        <a href="javascript:;" class="aui-category-box-item">45</a>
                    </div>
                </div>

                <div class="aui-category-box">
                    <p>数量</p>
                    <div class="aui-category-box-list num">
                        <div class="btn-group" role="group" aria-label="...">
                            <button type="button" class="btn btn-default sub">-</button>
                            <button type="button" class="btn btn-default value">1</button>
                            <button type="button" class="btn btn-default add">+</button>
                        </div>
                    </div>
                </div>

                <div class="aui-footer-group aui-footer-flex1">
                    <div class="aui-footer-flex">
                        <div class="aui-btn aui-btn-gray gotoPurchase" data-href="/shop/shopcart.html">
                            <span>加入购物车</span>
                        </div>
                        <div class="aui-btn aui-btn-red goPay" data-href="/mine/pay.html?id=">
                            <span>立即购买</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="m-actionsheet" id="actionSheet2">
            <div class="aui-show-box">
                <div class="aui-show-box-title aui-footer-flex">
                    <div class="aui-footer-flex1">配送至</div>
                    <div>
                        <a href="javascript:;" id="cancel2" class="">
                            <i class="icon icon-close"></i>
                        </a>
                    </div>
                </div>
                <div class="aui-text-info">
                    <p>北京市海地区西三环北路43号维新大厦
                    </p>
                    <p>北京市海地区西三环北路43号维新大厦
                    </p>
                    <p>北京市海地区西三环北路43号维新大厦
                    </p>
                    <p>北京市海地区西三环北路43号维新大厦
                    </p>
                </div>
            </div>
        </div>
        <div class="m-actionsheet" id="actionSheet3">
            <div class="aui-show-box">
                <div class="aui-show-box-title aui-footer-flex">
                    <div class="aui-footer-flex1">运费说明</div>
                    <div>
                        <a href="javascript:;" id="cancel3" class="">
                            <i class="icon icon-close"></i>
                        </a>
                    </div>
                </div>
                <div class="aui-text-info">
                    <p>免运费
                    </p>
                </div>
            </div>
        </div>
        <div class="m-actionsheet" id="actionSheet4">
            <div class="aui-show-box">
                <div class="aui-show-box-title aui-footer-flex">
                    <div class="aui-footer-flex1">商品说明</div>
                    <div>
                        <a href="javascript:;" id="cancel5" class="">
                            <i class="icon icon-close"></i>
                        </a>
                    </div>
                </div>
                <div class="aui-text-info">
                    <p>假一赔十 | 7天无忧退货 | 自营发货
                    </p>
                </div>
            </div>
        </div>
    </section>
    <footer class="aui-footer-button aui-footer-flex aui-footer-fixed">
        <div class="aui-footer-wrap">
            <i class="icon-shop"></i>
            <span>店铺</span>
        </div>
        <div class="aui-footer-wrap">
            <i class="icon-car"></i>
            <span>购物车</span>
        </div>

        <div class="aui-footer-group aui-footer-flex1">
            <div class="aui-footer-flex buy">
                <div class="aui-btn aui-btn-gray">
                <li class="aui-footer-flex" data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}">
                    <span>加入购物车</span>
                </li>
                </div>
                <div class="aui-btn aui-btn-red">
                <li class="aui-footer-flex" data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}">
                    <span>立即购买</span>
                </li>
                </div>
            </div>
        </div>
    </footer>
</section>

<script type="text/javascript">
    var json = {product:[]};
    var user = JSON.parse(sessionStorage.getItem("user"));
    $(document).ready(function () {

        $(".main_img").touchSlider({
            flexible: true,
            speed: 200,
            btn_prev: $("#btn_prev"),
            btn_next: $("#btn_next"),
            paging: $(".point a"),
            counter: function (e) {
                $(".point a").removeClass("on").eq(e.current - 1).addClass("on");
                $(".img_font span").hide().eq(e.current - 1).show();
            }
        });

    });
    $(function () {
        $(window).bind("scroll", function () {
            var sTop = $(window).scrollTop();
            var sTop = parseInt(sTop);
            if (sTop >= 44) {
                if (!$("#scrollBg").is(":visible")) {
                    try {
                        $("#scrollBg").slideDown();
                    } catch (e) {
                        $("#scrollBg").show();
                    }
                }
            } else {
                if ($("#scrollBg").is(":visible")) {
                    try {
                        $("#scrollBg").slideUp();
                    } catch (e) {
                        $("#scrollBg").hide();
                    }
                }
            }
        });
    });

    //购物车
    $(".aui-category-box-list").find("a").click(function(){
        $(this).toggleClass("active");
        $(this).siblings().removeClass("active");
         var strs = $.map($(".aui-category-box-list").find("a.active"),function(ele){
             if(ele.text){
                return ele.text;
             }
        });

        $(".aui-show-box-text").find(".selected").html(strs.join(", "));
        json.color = strs[0];
        json.size = strs[1];

    });

    $(".buy li").click(function(){
        $.get("/products",{"productId":2},function(data){
            $(".product").renderValues(data.list[0],{
                getPrice:function(item,value){
                    $(item).html(value * data.list[0].cutoff);
                }
            });
            json.product = data.list[0];
        });
    });

    $(".gotoPurchase").click(function(){
        json.num = Number($(".value").text());
        sessionStorage.setItem("json",JSON.stringify(json));
        window.location.href = $(this).data("href");
    });

    $(".goPay").click(function(){
        json.num = Number($(".value").text());
        var url = $(this).data("href");
        var myOrder = {
            "product.id":json.product.id,
            "user.id":user.id,
            "color":json.color,
            "number":Number($(".value").text()),
            "size":json.size,
            "state":1
        };
        $.post("/myOrders",myOrder,function(data){
            json.id = data;
            window.location.href = url + data;
        });
    });

    //数量
    $(".sub").click(function(){
        var num = Number($(".value").text());
        if(num > 1){
            $(".value").text(num - 1);
        }
    });
    $(".add").click(function(){
        var num = Number($(".value").text());
        if(num < json.product.storeNum){
            $(".value").text(num + 1);
        }
    });

    //立即付款

</script>
</body>
</html>
